<template>
	<view>
		<!-- 图片视频上传 -->
		<view class="df src-box">
			<view
				class="item"
				v-show="mediaUrl.length"
				v-for="(src, i) in mediaUrl"
				:key="i"
			>
				<view class="item-bd box-s">
					<video
						v-if="src.isVideo"
						class="item-cont"
						:src="src.url"
					></video>
					<image
						v-if="!src.isVideo"
						class="item-cont"
						:src="src.url"
						@tap="previewImage(src, mediaUrl)"
					></image>
					<view class="icon-del-row" @click="delMedia(i)">
						<view class="icon-del-col"></view>
						<view class="icon-del-col rotate"></view>
					</view>
				</view>
			</view>
			<view
				v-if="mediaUrl.length < limit"
				class="item df ac jsc"
				@tap="changeUpload"
			>
				<view class="box-s item-bd">
					<view class="center-bd">
						<slot>
							<uni-icons
								type="camera"
								color="#969799"
								size="80rpx"
							></uni-icons>
							<view class="g9 f26">
								{{ title }}
								<view>最多上传{{ limit }}张</view>
							</view>
						</slot>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'diy-upload',
	emits: ['emitsUrl'],
	props: {
		limit: {
			type: Number,
			default: 9,
		},
		title: {
			type: String,
			value: '',
			default: '上传图片或视频',
		},
		mediaType: {
			type: String,
			value: '',
			default: 'all',
		},
		value: {
			type: Array,
			value: [],
		},
	},
	data() {
		return {
			list: [
				{
					text: '图片',
					id: 1,
				},
				{
					text: '视频',
					id: 2,
				},
			],
			mediaUrl: [],
			mediaTypeArr: ['image', 'video'],
		}
	},
	mounted() {
		if (this.mediaType && this.mediaTypeArr.includes(this.mediaType)) {
			this.mediaTypeArr = [this.mediaType]
		}
		if (this.value && this.value.length > 0) {
			this.mediaUrl = this.value
		}
	},
	methods: {
		previewImage(src, mediaUrl) {
			const pics = mediaUrl
				.filter((mediaItem) => !mediaItem.isVideo)
				.map((i) => i.url)
			uni.previewImage({
				current: src,
				urls: pics,
			})
		},
		// 删除文件
		delMedia(i) {
			this.mediaUrl.splice(i, 1)
			this.$emit('emitsUrl', this.mediaUrl)
		},
		//选择视频
		changeVideo() {
			var that = this
			uni.chooseVideo({
				sourceType: ['camera', 'album'],
				success: function (res) {
					that.videoList.push(res.tempFilePath)
				},
			})
		},
		//文件提交上传
		addUpload(list) {
			let _that = this
			if (list.length) {
				list.forEach((item, index) => {
					//这里之所以循环一个一个上传是因为，我是用于小程序端的，目前uniapp不支持微信小程序以文件列表形式上传，
					uni.uploadFile({
						url:
							getApp().globalData.uploadDomain +
							'oss-web/oss/upload/file?asyn=false',
						filePath: item.tempFilePath,
						name: 'file',
						header: {
							tenantId: uni.getStorageSync('orgId'),
							Authorization: uni.getStorageSync('token'),
							reqChannel: getApp().globalData.reqChannel,
						},
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data)
							if (res.success) {
								let data = res.data
								let imgData = {
									...data,
									isVideo:
										item.fileType === 'video'
											? true
											: false,
								}
								if (_that.mediaUrl.length < _that.limit) {
									_that.mediaUrl.push(imgData)
								}
								// if (list.length === index + 1) {
								this.$emit('emitsUrl', this.mediaUrl)
								// }
							} else {
								uni.showToast({
									title: res.message
										? res.message
										: '上传失败~',
									icon: 'error',
								})
							}
						},
						fail(err) {
							console.log(err)
						},
					})
				})
			}
		},
		// 选择文件
		changeUpload() {
			let _that = this
			uni.chooseMedia({
				count:
					_that.mediaUrl.length > 0 ? 6 - _that.mediaUrl.length : 6,
				mediaType: _that.mediaTypeArr,
				sourceType: ['camera', 'album'],
				success: function (res) {
					let urlList = res.tempFiles.map((item) => {
						return {
							fileType: item.fileType,
							tempFilePath: item.tempFilePath,
							thumbTempFilePath:
								item.fileType === 'video'
									? item.thumbTempFilePath
									: '',
						}
					})
					_that.addUpload(urlList)
				},
			})
		},
	},
	watch: {
		value(val) {
			this.mediaUrl = val
		},
	},
}
</script>

<style scoped>
.src-box {
	flex-wrap: wrap;
}

.item {
	width: 33.3%;
	height: 0;
	padding-top: 33.33%;
	position: relative;
	box-sizing: border-box;
}
.item-bd {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 10rpx;
}

.item-cont {
	width: 100%;
	height: 100%;
}

.box-s {
	border: 2rpx solid #ccc;
	flex-direction: column;
}

.text-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 32rpx;
	line-height: 40px;
}

.icon-del-row {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	height: 52rpx;
	width: 52rpx;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 2;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.icon-del-col {
	width: 15px;
	height: 2px;
	background-color: #fff;
	border-radius: 2px;
}
.f26 {
	font-size: 26rpx;
}
.rotate {
	position: absolute;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.center-bd {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
}
</style>
